<template>
  <div class="player">
    <div class="song-info">
      <span>{{ singer.title }}</span>
      <span>{{ singer.singerName }}</span>
    </div>
    <div class="song-pic" @click="clickSwitch">
      <div class="song-pic-lyric" v-if="isSwitch">
        歌词
        <span>{{ lyricUrl.lyric }}</span>
        <span>{{ lyricUrl.trans }}</span>
      </div>
      <div class="song-pic-img" v-else>
        <img :src="singer.cover" alt="">
      </div>
    </div>
     <span>
        <van-icon name="play-circle-o" />
        <van-icon name="like-o" />
        <van-icon name="tv-o" />
      </span>
    <div class="song-control">
      <van-icon  class="back" name="arrow-left" @click="goBack" />
      <audio :src="songUrl" autoplay controls></audio>
    </div>
    <div class="singer-album">
      <span>歌手与专辑</span>
      <div class="singer">
        <img :src="albumUrl.picUrl" alt="">
        <span>
          歌手
          {{ singer.singerName }}
          </span>
      </div>
      <div class="album">
        <img :src="albumUrl.picUrl" alt="">
        <span>
          专辑
          {{ albumUrl.name }}
        </span> 
      </div>
    </div>  
    <div class="comment">
      <span><h3>热门评论</h3></span>
      <ul>
        <li v-for="item in commentUrl" :key="item.id">
          <div class="comment-wrap">
            <div class="avatarurl">
              <img :src="item.avatarurl" alt="">
            </div>
            <div class="hotComment">
             <span>{{ item.nick }} <img :src="item.vipicon" alt=""> <b><van-icon  name="good-job-o" />{{ item.praisenum }}</b></span>
             <span>{{ item.rootcommentcontent }}</span>
            </div>
          </div>
          
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import axios from 'axios';
export default {
  name: 'TSP',
    data(){
      return{
       songUrl:"",
       singer:{},
       isSwitch:false,
       lyricUrl:{},
      //  singerUrl:{},
       albumUrl:{},
       msg: 'Welcome to Your Vue.js App'
      }
    },
    created(){
        this.getData()
        this.getLyric()
        this.getStoreSinger()
        // this.getSinger()
        this.getAlbum()
    },
    methods:{
        getData(){
            axios.get("/jsososo/Song/urls",{
                params:{
                    id:this.$route.params.id,
                    // id:this.singer.mid
                }
            })
            .then(res => {
                console.log(res.data)
                this.songUrl=res.data.data[this.$route.params.id]
              
            })
            .catch(err => {
                console.error(err); 
            })
        },
        getLyric(){
            axios.get("/jsososo/lyric",{
                params:{
                    songmid:this.$route.params.id,
                }
            })
            .then(res => {
                console.log(res.data.data)
                this.lyricUrl=res.data.data
            })
            .catch(err => {
                console.error(err); 
            })
        },
        // getSinger(){
        //     axios.get("/api/singer/desc",
        //         {
        //         params:{
        //           singermid:this.singer.singerMid
        //         }
        //     })
        //     .then(res => {
        //         console.log(res.data)
        //         // this.singerUrl=res.data.data
        //     })
        //     .catch(err => {
        //         console.error(err); 
        //     })
        // },
        getAlbum(){
            axios.get("/api/album",
                {
                params:{
                  albummid:this.singer.albumMid
                }
            })
            .then(res => {
                console.log(res.data.data)
                this.albumUrl=res.data.data
            })
            .catch(err => {
                console.error(err); 
            })
        },
        getStoreSinger(){
          // console.log(Object.keys(this.$store.state.singer).length)
          if(Object.keys(this.$store.state.singer).length != 0){
            this.singer = this.$store.getters.singer
            sessionStorage.setItem("getsinger",JSON.stringify(this.$store.state.singer))
          }else{
            this.singer = JSON.parse(sessionStorage.getItem("getsinger"))
          }  
        },
        goBack() {//返回上一页面
          this.$router.go(-1);
        },
        clickSwitch(){
          this.isSwitch=!this.isSwitch;
        }
    }
}
</script>

<style scoped>
.back{
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 999;
  font-size: 40px;
}

.player span{
  display: block;
}
.song-info>span:nth-of-type(1){
  font-size: 20px;
  font-weight: 500;/**字体加粗 */
  margin-top: 20px;
}
.song-info>span:nth-of-type(2){
  font-size: 16px;
  margin-top: 10px;
  color: grey;
  font-weight: 250;/**字体加粗 */
}
.song-pic-lyric{
  width: 225px;
  height: 225px;
   overflow: hidden; /*文本超出隐藏*/
  border-radius:0.8rem;
  margin:auto;
  margin-top: 15px;
}
.song-pic-img>img{
  width: 60%;
  border-radius:0.8rem;
  margin-top: 15px;
}
.van-icon-play-circle-o{
    position: relative;
    color:#31c27c;
}
.van-icon-like-o{
    position: relative;
    color:#31c27c;
    margin: 0 15px 0 15px;
}.van-icon-tv-o{
   position: relative;
    color:#31c27c;
}
.singer-album>span{
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 400;/**字体加粗 */
}
.singer{
  margin-bottom: 100px;
}
.singer>img{
  width: 20%;
  border-radius:0.8rem;
  margin-left: 15px;
  float: left;
  clear:both;
}
.singer>span{
  float: left;
  margin-left: 15px;
  font-size: 18px;
  font-weight: 400;/**字体加粗 */
  margin-top: 25px;
}

.album>img{
  width: 20%;
  border-radius:0.8rem;
  margin-left: 15px;
  float: left;
  clear:both;
}
.album>span{
  float: left;
  margin-left: 15px;
  font-size: 18px;
  font-weight: 400;/**字体加粗 */
  margin-top: 25px;
}
.comment>span{
 text-align: center;
  margin-top: 65px;
}
.comment-wrap{
  margin: 50px 20px;
  
}
/* .avatarurl{
  float: left;
  clear:both;
} */
.avatarurl>img{
  float: left;
  width: 15%;
  border-radius: 30px;/**圆角 */
  clear:both;
}
.hotComment>span:nth-of-type(1){
 
  font-size: 14px;
  margin-top: 10px;
  margin-left: 8px;
  color: grey;
  font-weight: 250;/**字体加粗 */
  
  
}
.hotComment>span:nth-of-type(1)>img{
  width: 7%;
}
.hotComment>span:nth-of-type(1)>b{
  font-weight: 250;/**字体加粗 */
  margin-left: 90px;
  float: right;
}
.hotComment>span:nth-of-type(2){
  
  font-size: 14px;
  margin-bottom: 15px;
  margin-left: 55px;
  color: black;
  font-weight: 500;/**字体加粗 */
  text-align: left;
  background: #faebd7;
  border-radius: 10px;
}




.player>span:nth-of-type(3){
  font-size: 16px;
  margin-top: 10px;
  color: green;
}
.ranklist li{
  text-align: left;
  margin: 10px 20px;
  
}
.ranklist span{
  display: block;
}
.ranklist>ul>li>span:nth-of-type(1){
  margin-left: 5px;
  font-size: 18px;
  display: block;
  font-weight: 450;/**字体加粗 */
  overflow: hidden; /*文本超出隐藏*/
  text-overflow: ellipsis; /*文本超出显示省略号*/
  width: 250px;/**范围 */
  white-space: nowrap; /*超出的空白区域不换行*/ 
}
.ranklist>ul>li>span:nth-of-type(2){
  font-size: 10px;
  color: grey;
  font-weight: 250;/**字体加粗 */
}
.song-pic-lyric{
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
  background: red;
  color: #fff;
  height: 30rem;
  overflow: scroll;
}
</style>